<template>
  <div>
    <IForm ref="myFormRef" :dataForm="dataForm"> </IForm>
    <IButton :buttonData="submitDataBtn" />
  </div>
</template>
<script setup lang="ts" name="customize_form">
  import { ref } from 'vue'
  import { IForm, IButton, useMessage } from 'wb-platform-library'
  import { ButtonInterFace } from 'wb-platform-library/lib/dist/packages/components/IButton/src/IButton'
  const myFormRef = ref()
  const message = useMessage()
  const dataForm = ref({
    col: 6,
    labelWidth: 70, // 文本宽度
    form: {
      name: new Date().getTime(),
      labelIds: [],
      sex: '',
      time: [],
      checkBoxList: [],
      num:0,
    },
    fieldDataList: [
      {
        type: 'input', // form表单类型
        label: '姓名', // 字段描述信息
        field: 'name', // form 对应字段
        rules: [
          // 表单验证规则
          { required: true, message: '请输入姓名', trigger: 'blur' },
        ],
      },
      {
        type: 'inputsearch', // form表单类型
        label: '姓名', // 字段描述信息
        field: 'name', // form 对应字段
        rules: [
          // 表单验证规则
          { required: true, message: '请输入姓名', trigger: 'blur' },
        ],
        callback: async (val: string) => {
          console.log(val, '您点击了搜索')
        },
      },
      {
        type: 'inputNumber', // form表单类型
        label: '数量', // 字段描述信息
        field: 'num', // form 对应字段
        rules: [
          // 表单验证规则
          { required: true, message: '请输入数量', trigger: 'blur' },
        ],
      },
      {
        type: 'checkbox', // form表单类型
        label: '复选框', // 字段描述信息
        field: 'checkBoxList', // form 对应字段
        dataList: [
          { label: '标签1', value: '1' },
          { label: '标签2', value: '2' },
          { label: '标签3', value: '3' },
          { label: '标签4', value: '4' },
        ],
        rules: [{ required: true, message: '请选择复选框', trigger: 'blur', type: 'array' }],
      },
      {
        type: 'select', // form表单类型
        label: '标签', // 字段描述信息
        options: { multiple: true, maxCollapseTags: 1 },
        field: 'labelIds', // form 对应字段
        dataList: [
          { label: '标签1', value: '1' },
          { label: '标签2', value: '2' },
          { label: '标签3', value: '3' },
          { label: '标签4', value: '4' },
        ],
        rules: [{ required: true, message: '请选择标签', trigger: 'blur', type: 'array' }],
      },
      {
        type: 'select', // form表单类型
        label: '性别', // 字段描述信息
        field: 'sex', // form 对应字段
        dataList: [
          { label: '男', value: '1' },
          { label: '女', value: '2' },
        ],
        rules: [{ required: true, message: '请选择性别', trigger: 'blur' }],
      },
      {
        type: 'select', // form表单类型
        label: '性别', // 字段描述信息
        field: 'sex', // form 对应字段
        dataList: [
          { label: '男', value: '1' },
          { label: '女', value: '2' },
        ],
        rules: [{ required: true, message: '请选择性别', trigger: 'blur' }],
      },
      {
        type: 'rangePicker', // form表单类型
        label: '时间', // 字段描述信息
        field: 'time', // form 对应字段
      },
    ],
  })
  const submitDataBtn = ref<ButtonInterFace>({
    label: '提交表单',
    loading: false,
    callback: async () => {
      myFormRef.value.onSubmit().then(async () => {
        message.successMsg('点击确定')
      })
    },
  })
</script>
